<!--
Copyright 2023 The Chromium Authors
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->
<head>
  <meta charset="UTF-8">
  <script async type="module" src="./crossbench.mjs"></script>
  <link rel="stylesheet" href="./crossbench.css">
</head>

<body class="connecting">
  <section>
    <h1>cross<b>bench</b> Proxy
      <div class="headerImage">
        <img src="./knife.png" />
      </div>
    </h1>
    <p>
      Replay your current recording with <a href="https://chromium.googlesource.com/crossbench">crossbench</a>.
    <ul>
      <li>Start a local cross<b>bench</b> server with <code>./cb.py devtools-recorder-proxy</code>.</li>
      <li>
        Use the Auth-Token generated by cross<b>bench</b> to connect this extension.
      </li>
      <li>
        Use the command line arguments textarea to specify more options:
        <ul>
          <li>Add <code>--browser=...</code> for testing more browsers.</li>
          <li>Add <code>--probe=...</code> for testing more probes.</li>
        </ul>
      </li>
    </ul>
    </p>
  </section>

  <section id="settingsSection">
    <h2>Connection Settings:
      <span class="buttons">
        <button id="connectButton">Connect ⚯</button>
        <input type="text" id="status" name="status" size="12" readonly>
      </span>
    </h2>
    <span class="inputGroup">
      <label for="host">Host:</label>
      <input type="text" id="host" name="host" value="localhost" readonly size="9">
    </span>
    <span class="inputGroup">
      <label for="port">Port:</label>
      <input type="text" id="port" name="port" value="" size="5">
    </span>
    <span class="inputGroup">
      <label for="token">Auth-Token:</label>
      <input type="text" id="token" name="token" maxlength="32" size="32">
    </span>
  </section>
  <!--
    TODO: Add dedicated probe output section with links to the files
    TODO: Add record / replay section
    TODO: Add merge recording section
  -->
  <section id="configSection">
    <h2>
      cross<b>bench</b> Command Line Arguments:
      <span class="buttons">
        <button id="helpButton" class="help" title="Display crossbench's command-line --help.">
          CLI Help <i class="info">i</i>
        </button>
        <button id="probesHelpButton" class="help" title="Display crossbench's Probe help.">
          Probes Help <i class="info">i</i>
        </button>
        <button id="runButton"
          title="Run crossbench with the given command-line arguments and current DevTools recording.">
          Run <span class="icon">▷</span>
        </button>
        <button id="stopButton" title="Stop the current crossbench command.">
          Stop <span class="icon">◾</span>
        </button>
      </span>
    </h2>
    <textarea id="crossbenchCMD"></textarea>
  </section>

  <section>
    <h2>
      cross<b>bench</b> command stdout:
      <span class="buttons">
        <button id="copyStdout">
          Copy ⛶
        </button>
      </span>
    </h2>
    <textarea id="outputStdout" readonly></textarea>
  </section>

  <section>
    <h2>
      cross<b>bench</b> command stderr:
      <span class="buttons">
        <button id="copyStderr">
          Copy ⛶
        </button>
      </span>
    </h2>
    <textarea id="outputStderr" readonly></textarea>
  </section>

  <section id="recordingSection">
    <h2>
      DevTools Recorder JSON:
      <span class="buttons">
        <button id="copyRecorderJSON">
          Copy ⛶
        </button>
      </span>
    </h2>
    <textarea id="recording" readonly></textarea>
  </section>
</body>